<template>
	<view class="c-content">
		<view class="close-box" @click="close">
			<image src="../../static/images/close-01.png"></image>
		</view>
		<view class="c-info">
			<view class="client-img">
				<image :src="customerInfo && customerInfo.avatar ? customerInfo.avatar : goodsImg" mode="scaleToFill"></image>
			</view>
		</view>
		
		<view class="e-info-box" :style="{height : `calc(100vh - ${boxHeight}px)`}">
			<view class="i-info">
				<view class="i-name" v-if="isShowName">{{customerInfo && customerInfo.name ? ' ' + customerInfo.name : ' '}}</view>
				<view class="b-shopname" v-if="isShowCp">{{customerInfo && customerInfo.company ? ' ' + customerInfo.company : ' '}}</view>
				<view class="b-phone">{{customerInfo && customerInfo.cellphone ? ' ' + customerInfo.cellphone : ' '}}</view>
			</view>
			<!-- 发货方式 -->
			<view class="c-row no-line fisrt-row-top" v-show="customerInfo && customerInfo.id && sendGoodsList && sendGoodsList.length > 0">
				<view class="r-lb">{{sendGoosLbTxt}}</view>
				<dropdownMenu
				:descObj="sendGoosTypeObj"
				:list="sendGoodsList"
				:cW="290"
				@changeMenu="changeSendGoodsType"></dropdownMenu>
			</view>
			
			<!-- 收货人 -->
			<view class="c-row" v-show="customerInfo && customerInfo.id">
				<view class="r-lb rlb-right">{{consigneeLbTxt}}</view>
				<input :value="consigneeVal" 
					:placeholder="consigneTipTxt"
					@input="consignVal" 
					type="text"/>
			</view>
			
			<!-- 联系电话 -->
			<view class="c-row" v-show="customerInfo && customerInfo.id">
				<view class="r-lb">{{phoneLbTxt}}</view>
				<input :value="phoneVal" 
					:placeholder="phoneTipTxt"
					@input="inputPhone" 
					type="number"/>
			</view>
			
			<!-- 地区 -->
			<!-- <view class="c-row" v-show="customerInfo && customerInfo.id && defaulArea"> -->
		    <view class="c-row" v-show="customerInfo && customerInfo.id">
				<view class="r-lb rlb-right-e">{{areaLbTxt}}</view>
				<pickerRegion ref="pickerRegion" 
					@change="areaChange" 
					:defaultValue="defaulArea">
				</pickerRegion>
			</view> 
			
			<!-- 收货地址 -->
			<view class="c-row" v-show="customerInfo && customerInfo.id">
				<view class="r-lb">{{addrLbTxt}}</view>
				<input :value="addressVal" 
					:placeholder="addrTipTxt"
					@input="inputAddress" 
					type="text"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import lang from "../../js/conf/Lang.js";
	import dropdownMenu from "../comm/DropdownMenu.vue";
	import pickerRegion from "../comm/picker-region/picker-region.vue";
	export default {
		props:["customerInfo","isShowName","isShowCp",],
		components:{dropdownMenu,pickerRegion,},
		data() {
			return {
				
				boxHeight : 240,
				goodsImg:staticConst.GOOD_IMG,
				
				sendGoosLbTxt : lang.receiptCheckOut.sendGoosLbTxt,//发货方式
				sendGoodsList : [],
				sendGoosTypeObj : {},
				
				consigneeLbTxt : lang.receiptCheckOut.consigneeLbTxt,//收货人
				consigneTipTxt : lang.inputTipTxt + lang.receiptCheckOut.consigneeLbTxt,
				consigneeVal:　"",
				
				phoneLbTxt:lang.receiptCheckOut.phoneLbTxt,//电话
				phoneTipTxt:lang.inputTipTxt + lang.receiptCheckOut.phoneLbTxt,
				phoneVal : "",
				
				areaLbTxt : lang.receiptCheckOut.areaLbTxt,//地区
				areaObj : 
				{
					addressee:"",//收货人
					cellphone:"",//电话
					province:"",//省
					city:"",//市
					area:"",//区
					district:"",//省，市，区
					address:"",//地址
				},
				defaulArea : null,
				
				addrLbTxt : lang.receiptCheckOut.addrLbTxt,//地址
				addrTipTxt : lang.inputTipTxt + lang.receiptCheckOut.addrLbTxt,
				addressVal:"",
			};
		},
		methods:{
			initData(data)
			{
				this.clearData();
				this.setSendGoodsType(data);
				this.setConsigneeInfo(data);
				this.$refs.pickerRegion.initData();
			},
			
			clearData()
			{
				this.sendGoodsList = [];
				this.sendGoosTypeObj = {};
				this.consigneeVal　=　"";
				this.phoneVal = "";
				this.areaObj = {
					addressee:"",//收货人
					cellphone:"",//电话
					province:"",//省
					city:"",//市
					area:"",//区
					district:"",//省，市，区
					address:"",//地址
				};
				this.defaulArea = null;
				this.addressVal = "";
			},
			
			close()
			{
				this.$emit("closeCustmInfo");
			},
			
			/****选取发货方式*****/
			changeSendGoodsType(item)
			{
				this.sendGoosTypeObj = item;
				this.$emit("changeSendGoodsType",item);
			},
			
			/****设置发货方式****/
			setSendGoodsType(data)
			{
				if(data && data.shipp_ls)
				{
					this.sendGoodsList = data.shipp_ls;
					this.sendGoosTypeObj = this.sendGoodsList[0];
				}
				else
				{
					if(this.sendGoodsList && this.sendGoodsList.length)
					{
						this.sendGoosTypeObj = this.sendGoodsList[0];
					}
				}
			},
			
			/*****设置收货人信息****/
			setConsigneeInfo(data)
			{
				if(data && data.address_info && false)
				{
					data = data.address_info;
					this.areaObj.addressee = this.consigneeVal　=　data.addressee;
					this.areaObj.cellphone = this.phoneVal = data.cellphone;
					this.areaObj = {
						addressee:data.addressee,//收货人
						cellphone:data.cellphone,//电话
						province:data.province,//省
						city:data.city,//市
						area:data.area,//区
						district:data.district,//省，市，区
						address:data.address,//地址
					};
					this.areaObj.address = this.addressVal = data.address;
				}
				else
				{
					this.areaObj.addressee = this.consigneeVal　=　"";
					this.areaObj.cellphone = this.phoneVal = "";
					this.areaObj = {
						addressee:"",//收货人
						cellphone:"",//电话
						province:"",//省
						city:"",//市
						area:"",//区
						district:"",//省，市，区
						address:"",//地址
					};
					this.areaObj.address = this.addressVal = "";
				}
			},
			
			/***输入收货人***/
			consignVal(e)
			{
				this.areaObj.addressee = this.consigneeVal = e.target.value;
				this.$emit("consignVal",e);
			},
			
			/****输入电话****/
			inputPhone(e)
			{
				this.areaObj.cellphone = this.phoneVal = e.target.value;
				this.$emit("inputPhone",e);
			},
			
			areaChange(province,city,area)	
			{
				if(province)
				{
					this.areaObj.province = province.code;
					this.areaObj.district = province.name;
				}
				if(city)
				{
					this.areaObj.city = city.code;
					this.areaObj.district =this.areaObj.district+ "," + city.name
				}
				if(area)
				{
					this.areaObj.area = area.code;
					this.areaObj.district = this.areaObj.district + "," + area.name; 
				}
				this.$emit("areaChange",province,city,area);
			},
			
			/***输入地址*****/
			inputAddress(e)
			{
				this.areaObj.address = this.addressVal = e.target.value;
				this.$emit("inputAddress",e);
			},
		}
	}
</script>

<style lang="scss">
	.c-content
	{
		width: 310px;
		height: 100%;
		position: relative;
		background: #F9F9F9;
	
		.close-box
		{
			width: 15px;
			height: 15px;
			padding: 3px;
			position: absolute;
			top:20px;
			right: 20px;
			cursor: pointer;
			image
			{
				width: 100%;
				height: 100%;
			}
		}
		
		.close-box:hover
		{
			background-color: #EEE;
			opacity: .9;
		}
		.close-box:active
		{
			background-color: #DDD;
			opacity: .8;
		}
			
		.c-info
		{
			width: 100%;
			height: 220px;
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			padding-top: 20px;
			.client-img
			{
				width: 160px;
				height: 160px;
				border-radius: 50%;
				overflow: hidden;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.e-info-box
		{
			padding-left: 10px;
			padding-right: 10px;
			.i-info
			{
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 10px;
				border-bottom: 1px solid #ECECEC;
				font-size: 16px;
				.i-name
				{
					text-align: center;
					font-size: 26px;
					font-weight: bold;
					color: #333;
				}
				
				.b-shopname, .b-phone, .b-adress
				{
					text-align: center;	
					color: #999;
				}	
				.b-adress
				{
					color: #333;
				}
			}
			.c-row
			{
				font-size: 16px;
				color: #333;
				// display: flex;
				// align-items: center;
				padding-top: 20px;
				border-bottom: 1px solid #f2f2f2;
				.r-lb
				{
					padding-right: 30px;
				}
				.p-txt ,.n-r-Mon
				{
					font-weight: bold;
				}
				
				.n-r-Mon-e
				{
					font-weight: none;
				}
				
				
				.p-t-tip
				{
					color: #AAA;
					cursor: pointer;
				}
				
				.p-icon
				{
					font-size: 18px;
				}
				
				.addr-txt
				{
					padding-left: 20px;
					color: #999;
				}
				
				.rlb-right
				{
					padding-right: 46px;
				}
				
				.rlb-right-e
				{
					padding-right: 60px;
				}
				
				.rlb-tip-txt
				{
					color:  #F04848;
					text
					{
						padding-left: 20px;
					}
				}
				
				
				.input-photo-box
				{
					width: 100%;
					width: calc(100% - 100px);
					.remask-input
					{
						border: 1px solid #ECECEC;
						padding: 10px;
					}
				}
				
				switch
				{
					transform: scale(.8, .8);
					padding-left: 145px;
				}
			}
			
			.c-row-noceter
			{
				align-items : baseline;
			}
			
			.fisrt-row-top
			{
				padding-top: 10px;
			}
			
			.fisrt-row-top-e
			{
				padding-top: 25px;
			}
			
			.last-row-bottom
			{
				padding-bottom: 30px;
			}
			
			.no-line
			{
				border-bottom: none;
			}
		}
		
		
	
	}
</style>
